<template>
  <div class="pop-upSk">
   <div class="img_up">
     <div class="pop_name">{{ data.name }}</div>
     <!-- <div class="pop_value">地址：<span>{{ data.address }}</span></div> -->
     <span v-if="dataTcSj1.rq">
       <div class="pop_value">水位：<span>{{ dataTcSj1.sw }}m</span></div>
       <div class="pop_value">库存：<span>{{ dataTcSj1.kc }}万m³</span></div>
       <div class="pop_value">出库：<span>{{ dataTcSj1.ck }}万m³</span></div>
       <div class="pop_value">日期：<span>{{ dataTcSj1.rq }}</span></div>
     </span>
   </div>
 </div>
</template>

<script setup>
import { defineProps,ref } from 'vue';

const props = defineProps({
 data: {
   type: Object,
   default: () => ({})  // 给 data 一个默认的空对象
 },
 dataTcSj1:{
   type: Object,
   default: () => ({})  // 给 data 一个默认的空对象
 },
 position: Object
});
</script>

<style scoped lang="scss">
.pop-upSk {
     position: absolute;
     padding: 16px;
     border-radius: 10px;
     // height: 160px;
     bottom: 10px;
     left: -87px;
     width: 190px;
     max-width: 170px;
     max-height: 160px;
     font-size: 10px;
     background-image: url('/public/icon/气泡背景@3x.png');
     background-size: cover; /* 使背景图片覆盖整个元素 */
     background-repeat: no-repeat; /* 避免背景图片重复 */
}
   .pop_name{
     font-family: PingFangSC-Medium;
     font-size: 15px;
     color: #1A3352;
     font-weight: 500;
   }
   .pop_value{
     font-family: PingFangSC-Regular;
     font-size: 13px;
     color: #747B8B;
     line-height: 20px;
     font-weight: 400;
   }
</style>